<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<!--
bootstrap 5 默认 font-size 为1renm 默认为16px line-height 为1.5
标题分为h1到h6 .h1 到 .h6  表现为标题
display 标题 比普通标题更加突出 也是 .display-1 到 .display-6
small 元素和 .small类元素 用于在任何标题中创建较小的辅助文本
mark 将使用黄色背景颜色和一些内边距来设置 mark 和 .mark 样式 用于突出文本
abbr 设置底部带有虚线边框 悬停时带有问号的光标
blockquote 块引用 当引用其他来源的内容块时,使用 .blockquote 类 可以添加 .blockquote-footer 元素
dl 设置元素描述列表  dt 子标题 dd 描述内容
code 设置html code元素的样式
kbd 表示键盘输入
多行代码使用 pre 元素

.lead	突出段落。
.text-left	规定左对齐文本。
.text-break	防止长文本破坏布局。
.text-center	规定居中对齐的文本。
.text-decoration-none	删除链接中的下划线。
.text-end	规定右对齐文本。
.text-nowrap	规定文本不换行。
.text-lowercase	规定小写文本。
.text-uppercase	规定大写文本。
.text-capitalize	规定大写文本。
.initialism	以稍小的字体显示 <abbr> 元素内的文本。
.list-unstyled	删除列表项的默认 list-style 和左外边距（适用于 <ul> 和 <ol>）。
此类仅适用于直接子列表项。
如需从任何嵌套列表中删除默认列表样式，也请将此类应用于嵌套列表。
.list-inline	将所有列表项放在一行上。
请与每个 <li> 元素上的 .list-inline-item 一起使用。

针对于文本颜色的类
.text-muted 此文本已静音。
.text-primary 此文字很重要
.text-success 此文本表示成功
.text-info 此文字代表了一些信息
.text-warning 此文本表示警告
.text-danger 此文字代表危险
.text-secondary 次要文本
.text-white 此文字为白色
.text-dark 此文字为深灰色
.text-body（默认的 body 颜色/通常为黑色）
.text-light

.table-primary	蓝色：表示重要动作。
.table-success	绿色：表示成功或积极的动作。
.table-danger	红色：表示危险或潜在的负面行为。
.table-info	浅蓝色：表示中性的信息更改或操作。
.table-warning	橙色：表示可能需要注意的警告。
.table-active	灰色：将悬停颜色应用于表格行或表格单元格。
.table-secondary	灰色：表示不太重要的动作。
.table-light	浅灰色表格或表格行背景。
.table-dark	深灰色表格或表格行背景。


您还可以决定表格何时应该获得滚动条，具体取决于屏幕宽度：

类	屏幕宽度
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px
.table-responsive-xxl	< 1400px
  <div class="table-responsive-sm">
  <table class="table table-bordered">

为图像添加 图像形状

-->
<body>
<div>
  <p class="h1">h1 Bootstrap heading</p>
  <p class="h2">h2 Bootstrap heading</p>
  <p class="h3">h3 Bootstrap heading</p>
  <p class="h4">h4 Bootstrap heading</p>
  <p class="h5">h5 Bootstrap heading</p>
  <p class="h6">h6 Bootstrap heading</p>
</div>
<div>
  <h1 class="display-1">DISPLAY1</h1>
  <h1 class="display-2">DISPLAY2</h1>
  <h1 class="display-3">DISPLAY3</h1>
  <h1 class="display-4">DISPLAY4</h1>
  <h1 class="display-5">DISPLAY5</h1>
  <h1 class="display-6">DISPLAY6</h1>
</div>
<div>
  <h1>h1 heading <small>secondary text</small></h1>
</div>
<div>
  <p>this is <mark>marked text</mark></p>
  <p>this is <abbr title="attribute">abbr</abbr> text</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <br>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>
<div class="container mt-3">
  <h1>描述列表</h1>
  <p>d1 元素表示描述列表</p>
  <dl>
    <dt>咖啡</dt>
    <dd>-黑色的热饮</dd>
    <dt>牛奶</dt>
    <dd>白色的冷饮</dd>
  </dl>
</div>
<div>
  <p>这些元素 : <code>span</code>,<code>section</code></p>
  <p>请使用 <kbd>ctrl+p</kbd>打开打印预览</p>
  <pre>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.</pre>
  <p class="text-left">左对齐文本</p>
  <p class="text-end">右对齐文本</p>
  <p class="text-center">居中对齐文本</p>
  <p class="text-nowrap">不换行文本不换行文本不换行文本不换行文本不换行文本不换行文本</p>
  <p class="text-lowercase">THUDHSDHIDH</p>
</div>
<div class="container mt-3">
  <h1>上下文颜色</h1>
  <p class="text-muted">此文本已静音</p>
  <p class="text-white bg-primary">此文字很重要</p>
  <p class="text-success bg-success">此文本很成功</p>
  <p class="text-info bg-info">此文字表示了一些信息</p>
  <p class="text-warning bg-warning">此文字表示警告</p>
  <p class="text-danger bg-danger">此文字表示危险</p>
  <p class="text-secondary bg-secondary">次要文本</p>
  <p class="text-dark bg-dark">此文字表示深灰色</p>
  <p class="text-body bg-body">此文字表默认主体颜色 通常是黑色</p>
  <p class="text-light bg-light">此文本为浅灰色 白色背景上</p>
  <p class="text-white bg-white">此文本为白色 在白色背景上</p>
</div>
<div class="container mt-3">
  <h2>不透明文本颜色</h2>
  <p class="text-black-50">白色背景上不透明度为 50%的黑色文本</p>
  <p class="text-white-50 bg-dark">黑色背景上不透明度为 50%的白色文本</p>
</div>
<div class="container mt-3">
  <h1>基础表格</h1>
  <p>.table 类为表格添加了基本样式 浅色内边距 和水平分割线</p>
  <p>.table-striped 类为表格的每一行添加斑马线</p>
  <p>.table-bordered 类为表格的边框添加了浅色边框</p>
  <p>.table-hover 类为鼠标悬停时添加浅色背景</p>
  <p>.table-dark 类为表格添加深色背景</p>
  <p>.table-borderless 类为表格删除边框</p>
  <p>上下文类可用于为表格、表格行或表格单元格着色。可以使用的类有：.table-primary、.table-success、.table-info、.table-warning、.table-danger、.table-active、.table-secondary、.table-light 和 .table-dark：</p>
  <p>.table-sm 类为表格添加小尺寸</p>
  <p>.table-responsive 类在需要时向表格添加滚动条（当它在水平方向上太大时）：</p>
  <table class="table table-striped table-bordered table-hover table-sm">
    <thead>
    <tr class="table-dark">
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr class="table-primary">
      <td>Bill</td>
      <td>Gates</td>
      <td>bill@example.com</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Jobs</td>
      <td>steve@example.com</td>
    </tr>
    <tr class="table-success">
      <td>Elon</td>
      <td>Musk</td>
      <td>elon@example.com</td>
    </tr>
    </tbody>
  </table>
</div>
<div class="container mt-3">
  <h2>圆角边框</h2>
  <p>.rounded 类为图像添加圆角边框</p>
  <img src="/img/1.jpg" alt="sky" class="rounded" width="600" height="400">
  <h2>圆型</h2>
  <p>.rounded-circle 类将图像塑造为圆形</p>
  <img src="/img/3.jpg" alt="picture" class="rounded-circle" width="400" height="400">
  <h2>缩略图</h2>
  <p>.rounded-thumbnail 类将图像塑造为缩略图带边框</p>
  <img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl" class="rounded-thumbnail" width="600" height="400">
  <h2>对齐图像</h2>
  <p>.float-start 类将图像向左浮动, .float-end 类将图像向右浮动, .float-none 类将图像设置为默认值</p>
  <img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl" class="float-end" width="300" height="300">
  <img src="/img/girl_gesture_shorts_1066017_300x168.jpg" alt="girl" class="float-start" width="300" height="300">
  <p>居中显示图像 为了使图像居中，我们通过向图像添加了 utility 类 .mx-auto (margin:auto) 和 .d-block (display:block)：</p>
  <img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl" class="mx-auto d-block" width="300" height="300">
  <p>.img-fluid 类使图像可以很好地缩放到父元素（请调整浏览器窗口的大小来查看效果）：</p>
  <img src="/img/girl_hairpin_kimono_1068786_1920x1080.jpg" alt="Park" class="img-fluid" alt="Park" width="2000" height="1085">
</div>
</body>
</html>
